<template>
    <div style="margin: 0 10px 0 10px">
        <div style="margin: 10px">
            用户名: <Input v-model="dataFilter.userName" size="small" placeholder="" style="width: 120px" />
            昵称: <Input v-model="dataFilter.realName" size="small" placeholder="" style="width: 120px" />
            电话号码: <Input v-model="dataFilter.mobilePhone" size="small" placeholder="" style="width: 120px" />
            <Button type="primary" shape="circle" icon="ios-search" style="margin-left: 15px" @click="loadData"></Button>
        </div>
        <div style="margin: 10px">
            <Button type="primary" @click="handleAdd">新增</Button>
        </div>
        <Table :data="tableData"  :columns="columns"  border highlight-row  :loading="loading">
            <template slot-scope="{ row, index }" slot="action">
                <Button type="primary" size="small" style="margin-right: 5px" @click="handleView(row,index)">查看</Button>
                <Button type="primary" size="small" style="margin-right: 5px" @click="handleEdit(row,index)">编辑</Button>
                <Button type="error" size="small" @click="handleRemove(row,index)">删除</Button>
                <div>
                    <Button type="primary" size="small" style="margin: 5px" @click="handleUserRoleView(row,index)">用户角色</Button>
                </div>
            </template>
        </Table>
        <div style="margin: 25px;overflow: hidden">
            <div style="float: right;">
                <Page :total="total" :current="dataFilter.current" :page-size="dataFilter.size"
                      show-sizer
                      @on-change="changePage" @on-page-size-change="changeSize" :page-size-opts="[2,10,20,50,100]"></Page>
            </div>
        </div>
        <Modal  v-model="editModal"  title="新增或编辑"  width="680" :styles="{top: '60px'}" footer-hide>
            <MyEdit ref="editModal" @saveSucces="loadData">
            </MyEdit>
        </Modal>
        <Modal  v-model="viewModal"  title="查看"  width="780" :styles="{top: '60px'}" footer-hide>
            <MyView ref="viewModal" @saveSucces="loadData">
            </MyView>
        </Modal>
        <Modal  v-model="userRoleViewModal"  title="查看"  width="280" :styles="{top: '60px'}" footer-hide>
            <UserRoleView ref="userRoleViewModal" @saveSucces="loadData">
            </UserRoleView>
        </Modal>
    </div>
</template>
<script>
    import MyEdit from '@/views/manage/system/user/Edit';
    import MyView from '@/views/manage/system/user/View';
    import UserRoleView from '@/views/manage/system/user/UserRoleView';
    import Base from '@/components/table/BaseList';
    export default {
        components:{
            MyEdit,MyView,UserRoleView
        },
        extends:Base,
        data () {
            return {
                columns: [
                    { type: 'index', width: 60, align: 'center'},
                    { title: '用户名', key: 'userName'},
                    { title: '昵称', key: 'realName'},
                    { title: '电话号码',key: 'mobilePhone'},
                    { title: '学校名称',key: 'deptName'},
                    { title: '年龄',key: 'age'},
                    { title: '家庭地址',key: 'address'},
                    { title: '操作', key: 'action',slot: 'action', width: 200, align: 'center'}
                ],
                userRoleViewModal:false
            }
        },
        mounted(){
            this.loadData();
        },
        methods: {
            handleEdit(row){
                this.editModal=true;
                this.$refs.editModal.loadDataById(row.id);
            },handleView(row){
                this.viewModal=true;
                this.$refs.viewModal.loadDataById(row.id);
            },
            loadData(){
                this.baseLoadData('/api/system/user/list');
            },handleAdd(){
                this.editModal=true;
                this.$refs.editModal.loadDataById(null);
            },handleRemove(row){
                this.baseRemove('/api/system/user/delete',{id:row.id});
            },handleUserRoleView(row){
                this.userRoleViewModal=true;
                this.$refs.userRoleViewModal.loadDataById(row.id);
            }
        }
    }
</script>
